<template>
  <div>
    <div class="verification_code" @click.stop='verification_input=false'>
      <div class="four_input" style="position: relative;" @click.stop="verification_input=true">
        <div :class="i<=verification_code.length-1?'four_input_item active_four_input_item':'four_input_item'" v-for="i in num" :key="i" :style="{width:size+'rem',height:size+'rem'}">
          <div class="content" v-show="i<=verification_code.length-1" :style="{width:size/3+'rem',height:size/3+'rem'}">
            
          </div>
        </div>
        <input class="verification_code_input" :focus="verification_input_type()" :maxlength="num" :adjust-position="false"  id="input" v-model="verification_code" type="number" value="" @blur="verification_input=false" />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      num:{// 框框的个数  @submit 当输入框填满时把输入框的内容返回
        type:Number,
        default:4
      },
      size:{
        default:100
      }
    },
    data() {
      return {
        verification_input:false,
        verification_code:"",
      };
    },
    watch:{
      verification_code(newval,oldval){

          this.$emit('submit',this.verification_code)
        
      }
    },
    methods:{
      verification_input_type(){
        return this.verification_input
      },
    }
  }
</script>

<style lang="less" scoped>
.verification_code_input{
                width: 0rem;
                top: 0;
                left: 0;
                height: 0rem;
                text-align: left;
                position: absolute;
                color: #fff;
                background-color: rgba(255, 255, 255, 0);
  }
  .verification_code{
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    .title{
      font-size: 32rem;
      font-weight: 600;
      color: #333333;
      margin-top: 304rem;
    }
    .four_input{
      display: flex;
      justify-self: content;
      justify-content: space-between;
      position: relative;
      margin-top: 10rem;
      .four_input_item{
        margin-right: 14rem;
        width: 50rem;
        height: 50rem;
        background: rgba(196,196,196,0.20);
        border: 2rem solid #dfdddd;
        border-radius: 16rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .four_input_item:nth-last-of-type(1){
        margin-right: 0;
      }
      .active_four_input_item{
        background: #F7FAFF;
        border: 2px solid #95BDFF;
      }
      .content{
        width: 30rem;
        height: 30rem;
        background: #000000;
        border-radius: 50%;
      }
    }
  }
</style>
